import React, { Fragment } from 'react'
import "../../scss/jjt/myCollection.scss"
import { SettingO,Ellipsis    } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { Toast,NavBar  } from 'react-vant';
import { Typography } from 'react-vant';
import { useState } from 'react';
import { ShareSheet } from 'react-vant'
import IconFont from "../publics/JjtIcon";
import { useEffect } from 'react';
import axios from 'axios';
//我的收藏
export default function MyCollection() {
    let navigate = useNavigate();
    //收藏信息
  let [collectData, setCollectData] = useState([]);
  //单条信息
  let [item, setItem] = useState({});
  let getAppointmentData = async () => {
    let res = await axios.get("http://localhost:3000/jjt/getCollect");
    let uid = localStorage.getItem("_id")
    setCollectData(res.data.filter(item=>item.uid===uid));
  }
  let dian = (item)=>{
    console.log(item);
    setItem(item);
    setVisible(true)
  }
  let toselect =async (option, index)=>{
    
    if(option.name==="删除"){
        await axios.post("http://localhost:3000/jjt/upcollect",item)
        getAppointmentData()
    }
    if(option.name==="预约看房"){
        console.log('index', index)
        item._id = item.houseid
        console.log(item._id);
        navigate("/booking_add",{state:{item}})
    }
    
    setVisible(false)
  }
  useEffect(() => {
    getAppointmentData();
  },[])
    const options = [
        [
          { name: '微信', icon: <IconFont type={"icon-weixin"} style={{fontSize:"50px",marginLeft:"10px"}}></IconFont> },
          { name: '朋友圈', icon: <IconFont type={"icon-pengyouquan"} style={{fontSize:"50px",marginLeft:"10px"}}></IconFont>},
          { name: '微博', icon: <IconFont type={"icon-QQ"} style={{fontSize:"55px",marginLeft:"10px"}}></IconFont> },
          { name: 'QQ', icon: <IconFont type={"icon-qqkongjian"} style={{fontSize:"50px",marginLeft:"10px"}}></IconFont>},
        ],
        [
          { name: '预约看房', icon: <IconFont type={"icon-yuyue"} style={{fontSize:"50px",marginLeft:"10px"}}></IconFont> },
          { name: '删除', icon: <IconFont type={"icon-shanchu2"} style={{fontSize:"50px",marginLeft:"10px"}}></IconFont> },

        ],
      ]
    const [visible, setVisible] = useState(false)
    const content =
  'React Vant 是一套轻量、可靠的移动端 React 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用，使用过程中发现任何问题都可以提 Issue 给我们，当然，我们也非常欢迎你给我们发 PR。'
  return (
    <div className='jjtmycoll'>
        <div className='jjtmycolltop'>
            <NavBar
            title="我的收藏"
            
            // leftText="返回"
            rightText={<SettingO/>}
            onClickLeft={() => {navigate("/myapp")}}
            onClickRight={() => Toast('按钮')}
            />
        </div>
        <div className='jjtmycollbottom'>
            {
                collectData.map(item=>(
                    <Fragment key={item._id}>
                        <div className='jjtmycollbottomcon'>
                            <div className='jjtmycollbottomcon1'>
                                <img src={require("../../staticfile/userimg.jpg")} alt="" />
                            </div>
                            <div className='jjtmycollbottomcon2'>
                                <div className='jjtmycollbottomcon2p1'>
                                    <Typography.Text ellipsis className='jjtmycollbottomcon2p1con'>{content}</Typography.Text>
                                </div>
                                <p className='jjtmycollbottomcon2p2'>
                                    {/* <span>2室·福港园大厦·福田中心</span> */}
                                    <span>{item.house_type.split("/")[0]}·{item.plot}·{item.name}</span>
                                </p>
                                <p className='jjtmycollbottomcon2p3'>
                                    <span>{item.price}元/月</span>
                                </p>
                                <p className='jjtmycollbottomcon2p4'>
                                    {/* <span>2099年12月55号更新</span> */}
                                    <span>{item.add_time.split("-")[0]}年{item.add_time.split("-")[1]}月{item.add_time.split("-")[2].split("T")[0]}号更新</span>

                                </p>
                                <Ellipsis className='jjtmycollbottomcon2Ellipsis' onClick={()=>{dian(item)}}></Ellipsis>
                            </div>
                        </div>
                    </Fragment>
                ))
            }
        </div>
        <ShareSheet
        visible={visible}
        options={options}
        title='立即分享给好友'
        onCancel={() => setVisible(false)}
        onSelect={(option, index) => {
          toselect(option, index)
        }}
      />
    </div>
  )
}
